<template>
  <div>
    <!-- 
      ref在自定义组件中使用
      在自定义组件中使用ref，可以得到当前的自定义组件的实例
      通过组件实例，可以得到组件中数据或方法
    -->
    <child1 ref="child" />
  </div>
</template>

<script>
import child1 from "./components/child1";
export default {
  data() {
    return {};
  },
  components: {
    child1,
  },
  mounted() {
    // 通过实例可以得到组件中的数据
    console.log(this.$refs.child.title);
    // 修改组件中数据
    setTimeout(() => {
      this.$refs.child.title = "bbbb";
    }, 2000);

    // 调用方法
    this.$refs.child.fn()

    // 得到当前自定义组件中的 dom对象
    console.log(this.$refs.child.$el);

    console.log(this.$refs.child);
  },
};
</script>

<style lang='scss' scoped>
</style>